<template>
<div class="contain">

  <div class="title">
      <div class="title-seacrh">
        <span class="s1">
          <img src="../img/1.png" alt="">
        </span>
        <div>
          <input type="text" :placeholder=searchSuggest @click="searchs">
          <span>
            <img src="../img/search.png" alt="">
          </span>
        </div>
        <span class="s3">
          <img src="../img/2.png" alt="">
        </span>
      </div>


  </div>
  <div class="tabs">
    <van-tabs v-model="active" animated swipeable background="#c74c3e" color="white" line-width="30px" line-height="5px" title-inactive-color="white"
              title-active-color="#fffffe" >
      <van-tab title="个性推荐">
        <div class="swipe">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(key,item) in baner" :key="item"><img :src=key.pic alt="" @click="aa(key,item)"></van-swipe-item>

          </van-swipe>

        </div>
        <nov></nov>
        <gedan></gedan>
        <seesee></seesee>
        <newmusic></newmusic>
        <anchor></anchor>
        <xzmm></xzmm>
        <videos></videos>

      </van-tab>
      <van-tab title="主播电台">
        <div class="swipe">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="../img/lb8.png" alt=""></van-swipe-item>
            <van-swipe-item><img src="../img/lb9.png" alt=""></van-swipe-item>
            <van-swipe-item><img src="../img/lb10.png" alt=""></van-swipe-item>
            <van-swipe-item><img src="../img/lb11.png" alt=""></van-swipe-item>
            <van-swipe-item><img src="../img/lb12.png" alt=""></van-swipe-item>
            <van-swipe-item><img src="../img/lb13.png" alt=""></van-swipe-item>
            <van-swipe-item><img src="../img/lb14.png" alt=""></van-swipe-item>
          </van-swipe>

        </div>
        <Ahnov></Ahnov>
        <toady></toady>
        <jinping></jinping>
        <fc></fc>
        <dz></dz>
        <qg></qg>
        <ms></ms>
      </van-tab>
    </van-tabs>
  </div>
<tabbar></tabbar>
</div>
</template>

<script>
  import gedan from '../components/personal/gedan'
  import seesee from '../components/personal/seesee'
  import newmusic from '../components/personal/newmusic'
  import anchor from '../components/personal/anchor'
  import videos from '../components/personal/videos'
  import xzmm from '../components/personal/xzmm'
  import nov from '../components/personal/nov'
  import Ahnov from '../components/AnchorStation/Ahnov'
  import toady from '../components/AnchorStation/today'
  import jinping from '../components/AnchorStation/jinping'
  import fc from '../components/AnchorStation/fanchang'
  import dz from '../components/AnchorStation/dianzi'
  import qg from '../components/AnchorStation/qinggan'
  import ms from '../components/AnchorStation/ms'
  import tabbar from '../components/personal/tabbar'
  import {mapState} from 'vuex';
    export default {
      name: "index",
      components:{ gedan,seesee,newmusic,anchor,videos,xzmm,nov,Ahnov,toady,jinping,fc,dz,qg,ms,tabbar},
      data(){
          return{
            active:0,
            searchSuggest:'',

          }
      },
      computed:{
        ...mapState(['baner'])
      },
      methods:{
        searchs(){
          this.$router.push({path:'/search'});
        },
        aa(key,item){
          console.log(key);
          console.log(item);
        }
      },
      created() {

        this.$http.get('http://localhost:3000/search/default')
          .then((res) => {
            this.searchSuggest = res.data.data.showKeyword;

          })
          .catch((err)=>{
            console.log(err);
          });
        this.$api.getBanners({type:2});


      },
    }
</script>

<style lang="scss" >
*{
  margin: 0px;
  padding: 0px;
}

.contain{
  width: 1245px;


  .title{
    width: 100%;
    height: 695px;
    overflow: hidden;
    background-color: #c74c3e;
    .title-seacrh{
      font-size: 0;

      box-sizing: border-box;
      padding-top: 80px;

      .s1{
        padding-left: 60px;

        img{
          width: 60px;
        }
      }
      .s3{
        padding-left: 40px;
      }
      span{
        display: inline-block;
        box-sizing: border-box;
        font-size: 16px;
        img{
          width: 60px;
          vertical-align: middle;
        }
      }
      div{
        position: relative;
        font-size: 16px;
        display: inline-block;
        span{
          display: inline-block;
          position: absolute;
          left: 38%;
          top: 55%;
          transform: translate(-38%,-55%);
        }
        img{
          width: 40px;
        }
        input{
          background-color: #cf6a60;
          border-radius: 60px;
          border: none;
          text-indent: 38%;
          height: 90px;
          width: 920px;
          margin-left: 54px;
          font-size: 35px;
          outline: medium;
          color: #e5b3af;
        }
      }
    }
  }
  .tabs{
    width: 100%;
    font-size: 0;
    position: absolute;
    top: 170px;

    .swipe{
      position: relative;
      margin-top: 30px;
      padding: 0 15px;
      height: 475px;
      img{
        border-radius: 20px;
        width: 1210px;
        height: 475px;
      }
    }

  }



}
</style>
